<template>
	<view class="m-lists">

		<view class="loading-warp" v-if="loadShow">
			<view style="position: relative;width: 45px;">
				<text></text>
				<text></text>
				<text></text>
				<text></text>
				<text></text>
			</view>
		</view>
		<view class="loading-empty" v-if="!loadShow && lists.length <= 0">
			<view class="loading-empty__img">
				<image src="/static/images/data-none.png" mode="widthFix" style="width: 150px;"></image>
			</view>
			<text class="loading-empty__title">{{ emptyText ? emptyText : $t('m_lists.none-empty') }}</text>
		</view>
		
		<view class="lists-list" v-if="!loadShow">
			<view class="list-item flex-between" v-for="(item,index) in lists" :key="index">
				123
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"m-lists",
		props: ['lists','emptyText'],
		data() {
			return {
				loadShow:true
			};
		},
		mounted(){
			if(this.lists && this.lists.length > 0){
				this.loadShow = false;
			}else{
				this.loadShow = true;
			}
		}
	}
</script>

<style lang="scss">
	.loading-empty{
		height: 495rpx;
		display: flex;
		flex-direction:column;
		align-items: center;
		justify-content: center;
		&__title{
			font-size: $contentSize;
			color: $incolor-3;
		}
	}
	.loading-warp {
		height: 495rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.loading-warp text{
		display:block;
		bottom:0px;
		width: 9px;
		height: 5px;
		background:$incolor-3;
		
		position:absolute;
		-webkit-animation: animation 1.5s	infinite ease-in-out;
		-moz-animation: animation 1.5s	infinite ease-in-out;
		-ms-animation: animation 1.5s	infinite ease-in-out;
		-o-animation: animation 1.5s	infinite ease-in-out;
		animation: animation 1.5s	 infinite ease-in-out;
	}
	.loading-warp text:nth-child(2){
		left:11px;
		-webkit-animation-delay: .2s;
		-moz-animation-delay: .2s;
		-ms-animation-delay: .2s;
		-o-animation-delay: .2s;
		animation-delay: .2s;
	}
	.loading-warp text:nth-child(3){
		left:22px;
		-webkit-animation-delay: .4s;
		-moz-animation-delay: .4s;
		-ms-animation-delay: .4s;
		-o-animation-delay: .4s;
		animation-delay: .4s;
	}
	.loading-warp text:nth-child(4){
		left:33px;
		-webkit-animation-delay: .6s;
		-moz-animation-delay: .6s;
		-ms-animation-delay: .6s;
		-o-animation-delay: .6s;
		animation-delay: .6s;
	}
	.loading-warp text:nth-child(5){
		left:44px;
		-webkit-animation-delay: .8s;
		-moz-animation-delay: .8s;
		-ms-animation-delay: .8s;
		-o-animation-delay: .8s;
		animation-delay: .8s;
	}
	
	@-webkit-keyframes animation {
	    0% {height:5px;-webkit-transform:translateY(0px);background:$incolor-3;}
	    25% {height:30px;-webkit-transform:translateY(15px);background:$maincolor-1;}
	    50% {height:5px;-webkit-transform:translateY(0px);background:$incolor-3;}
	    100% {height:5px;-webkit-transform:translateY(0px);background:$incolor-3;}
	}
	
	@-moz-keyframes animation {
	    0% {height:5px;-moz-transform:translateY(0px);background:$incolor-3;}
	    25% {height:30px;-moz-transform:translateY(15px);background:$maincolor-1;}
	    50% {height:5px;-moz-transform:translateY(0px);background:$incolor-3;}
	    100% {height:5px;-moz-transform:translateY(0px);background:$incolor-3;}
	}
	
	@-ms-keyframes animation {
	    0% {height:5px;-ms-transform:translateY(0px);background:$incolor-3;}
	    25% {height:30px;-ms-transform:translateY(15px);background:$maincolor-1;}
	    50% {height:5px;-ms-transform:translateY(0px);background:$incolor-3;}
	    100% {height:5px;-ms-transform:translateY(0px);background:$incolor-3;}
	}
	
	@keyframes animation {
	    0% {height:5px;transform:translateY(0px);background:$incolor-3;}
	    25% {height:30px;transform:translateY(15px);background:$maincolor-1;}
	    50% {height:5px;transform:translateY(0px);background:$incolor-3;}
	    100% {height:5px;transform:translateY(0px);background:$incolor-3;}
	}
</style>